tags: ItIron2021 Javascript

作者碎碎念

終於來到第20天了，回頭看了一下...自己這系列文章缺點真是不少，要把活動中所講的觀念用簡短的文字轉述下來真的蠻有難度的，未來要寫這樣的文章前會再做更全面的規劃，今年就請大家忍耐一下，感謝(●'◡'●)

前言

昨天我們拐了個小彎去玩了一個小主題，今天開始則是一系列的相關主題了，還請大家撐住，這是講解應用問題前的最後一系列主題，也是我認為極端重要且難度相對高的部分，若有任何不清楚的地方都歡迎留言討論囉!

本日題目與解釋

請你解釋JS中是如何處理同步、非同步情況的?

是的，這一系列的題目會圍繞著非同步的主題前進，若你覺得你對這方面還不夠熟悉，我自己是蠻推薦好好看完這幾天的文章的:D 我們來看一下要如何解這題目吧!

其實要回答這個題目，最直接的方法就是講出關鍵字 Event Loop
點出面試官想聽的主題後你再開始進一步的說明會是我個人比較推薦的方式。

我們都知道Javascript是一個單執行緒(single-thread)的語言，也就是一次他只能處理一件事情，理論上你必須等前面的事情完成後才可以繼續往下處理，舉個簡單的例子

console.log(1)
console.log(2)
console.log(3)

// 毫不讓人意外的輸出結果
1
2
3

但很多時候我們需要等API回傳結果才能做某一部份的操作，這時候就會出一點問題了，我們用setTimeout來模擬一下需要等待的回應

console.log(1)
setTimeout(()=> console.log(2), 1000) 
console.log(3)

// 輸出結果就會變為
1
3
---- 一秒過後 ----
2

上述這個看起來有點奇妙的結果就是Event Loop所造成的，畢竟實際上我們不可能等到api都回應之後才繼續其他無關的程式瑪的操作，打個實際的比方吧!

假設(或是不用假設)你今天是個肥宅，半夜時去買消夜只是基本，你打算買雞排、飲料、滷味跟燒烤回去吃，你並不會先買完雞排再去買飲料、再去買之後的每一個東西，你是先到每一家店去點餐，並在餐點做好之後再回去拿

程式碼的執行也是這樣的，當JS在主執行緒(main thread/stack)碰到非同步程式碼的時候，就會先將它丟到一個叫做Web API的等待區塊，讓非同步程式瑪在那邊執行完後推到佇列(queue)去等待主執行緒中的程式瑪都執行完畢後，再將佇列中排隊的傢伙一個個推回主執行緒並開始運作，如下圖的概念。

這就是event loop最基本的說明了，這也就是為什麼剛剛的簡易範例中會是先印出1、3，一秒後才看到2這個數字。我在系列的文章不斷強調這系列並不會深入講解每一個遇到的概念，畢竟這不是此系列的重點，但你可以透過我提供的關鍵字或資源去作進一步的講解。event loop自然還有一些其他的細節，比方說一開始run time時還有一個分配heap memory的步驟等等，有興趣的可以參考今天的推薦影片，js event loop我還沒有看過講得比他更好的!

本日核心觀念與總結

核心觀念

event loop

總結

• 了解Javascript中如何處理非同步程式碼的運行並能舉出基本例子

超級推薦的影片

What the heck is event loop

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!